<template>
  <div class="single-container">
    <div class="content-container">
      <div class="naviga">
        <span>产品能力分析&nbsp;></span>
        <span class="setColor">单品监测与分析</span>
      </div>
      <div class="mainPage" style="background-color: #E0E8EF">
        <div class="summaryHeader">
          <span class="lightYellow">{{baseInfoProd.totalCategory}}</span>个品类，
          <span class="lightYellow">{{baseInfoProd.totalProductCode}}</span>个产品型号，其中
          <span class="lightYellow">{{baseInfoProd.onlineSaleCount}}</span>个型号在售，
          <span class="lightYellow">{{baseInfoProd.offlineSaleCount}}</span>个型号下市
        </div>
        <div class="whiteContainer">
          <div class="contentHeader">
            <div style="font-weight:bolder;color:#212121;">
              <b>监控与预警</b>(
              <b style="color:#606266;font-weight:bolder;">{{monitorSet.totalRecord || 0}}个预警</b>)
            </div>
            <div class="watchSet" @click="controlDialogSet">监控设置</div>
          </div>
          <div class="sourceContainer">
            <div class="sourceHeader">
              <div class="conditionContainer flex-container space-between" v-if="analysisSelect">
                <div class="flex-item">
                  <el-form
                    :inline="true"
                    :model="analysisSetInit"
                    class="demo-form-inline single-form-inline"
                    size="small"
                  >
                    <el-form-item label="监控指标">
                      <el-select v-model="analysisSetInit.monitoringIndex" placeholder="监控指标">
                        <el-option label="全部" value="全部"></el-option>
                        <el-option label="销售额" value="销售额"></el-option>
                        <el-option label="销售量" value="销售量"></el-option>
                        <el-option label="销售均价" value="销售均价"></el-option>
                        <el-option label="销售量增率" value="销售量增率"></el-option>
                        <el-option label="销售额增率" value="销售额增率"></el-option>
                        <el-option label="市占率" value="市占率"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="监控周期">
                      <el-select
                        v-model="analysisSetInit.monitorCircle"
                        @change="onControlDurationChange"
                        placeholder="监控周期"
                      >
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="月" value="month"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="异常时间段" v-if="analysisSetInit.monitorCircle == 'month'">
                      <el-date-picker
                        @change="controlMonthTimeChange"
                        size="small"
                        value-format="yyyy-MM"
                        v-model="analysisSetInit.monitorTime"
                        type="month"
                        placeholder="异常时间段"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="预警时间">
                      <el-date-picker
                        v-model="analysisSetInit.controlValueTime"
                        type="daterange"
                        size="small"
                        align="center"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="flex-item">
                  <el-button type="text" @click="onSubmitSelectInit(0)">查询产品型号/名称</el-button>
                </div>
              </div>
              <div
                class="conditionContainer flex-container space-between"
                style="width: 100%;height: 40px;"
                v-else
              >
                <div class="flex-item">
                  <el-form
                    :inline="true"
                    :model="controlSetInit"
                    class="demo-form-inline"
                    size="small"
                  >
                    <el-form-item label="查询参数">
                      <el-select
                        v-model="controlSetInit.controlBrand"
                        placeholder="查询参数"
                        style="width: 150px;"
                      >
                        <el-option label="产品型号" value="产品型号"></el-option>
                        <el-option label="产品名称" value="产品名称"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-input v-model="controlSetInit.controlProdCode" placeholder="输入查询参数"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        size="mini"
                        type="primary"
                        @click="onSubmitProdCodeOrName(controlSetInit)"
                      >查 询</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="flex-item">
                  <el-button type="text" @click="onSubmitSelectInit(1)">组合查询</el-button>
                </div>
              </div>
            </div>
            <div class="tableContainer" style="margin: 0 12px">
              <el-table
                :data="monitorSet.prodCtrolSet"
                stripe
                border
                class="setHeight"
                size="mini"
                style="width: 100%"
              >
                <el-table-column prop="productCode" label="产品型号" width="100"></el-table-column>
                <el-table-column prop="monitorTime" label="预警时间" min-width="150"></el-table-column>
                <el-table-column prop="productName" label="产品名称" min-width="180"></el-table-column>
                <el-table-column prop="monitoringIndex" label="监控指标" width="95"></el-table-column>
                <el-table-column prop="monitorCycle" label="监控周期" width="80"></el-table-column>
                <el-table-column prop="monitor" label="监控指标值" width="120"></el-table-column>
                <el-table-column prop="indexValue" label="预警值" width="110"></el-table-column>
                <el-table-column label="差值" width="120">
                  <template slot-scope="scope">
                    <span
                      :style="{'color': parseInt(scope.row.dValue) > 0 ? '#606266':'red'}"
                    >{{scope.row.dValue }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="差值比" width="120">
                  <template slot-scope="scope">
                    <span
                      :style="{'color': parseInt(scope.row.differenceRatio) > 0 ? '#606266':'red'}"
                    >{{scope.row.differenceRatio }}</span>
                  </template>
                </el-table-column>
                <el-table-column min-width="165" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="detailRowSet(scope.row)"
                      type="text"
                      size="small"
                    >详情</el-button>
                    <el-button
                      @click.native.prevent="pushRowSet(scope.row)"
                      type="text"
                      size="small"
                    >推送</el-button>
                    <el-button
                      @click.native.prevent="analysisRowSet(scope.row)"
                      type="text"
                      size="small"
                    >异常分析</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="paginationSet">
              <div class="pagination-container">
                <span class="toStart" @click="handleCurChange(1)">首页</span>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page.sync="monitorSet.currentPage"
                  @current-change="handleCurChange"
                  :total="monitorSet.totalRecord"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  dialog-container -->
    <div class="dialog-container">
      <!--  监控设置Dialog  -->
      <div class="control-dialog dialogHeaderFont">
        <el-dialog
          width="100%"
          top="8vh"
          title="产品预警监控列表"
          :visible.sync="controlDialogTableVisible"
        >
          <div class="control-dialog-content">
            <div class="dialog-content-item controlProd">
              <div class="content-item-container">
                <div class="titleHeader controlProdHeader">我的产品监控</div>
                <div class="controlProdContent">
                  <div class="controlProdSel">
                    <div class="controlProdSel-container" v-if="controlSelect">
                      <el-form
                        :inline="true"
                        :model="controlSetProd"
                        class="control-form-inline"
                        size="small"
                      >
                        <el-form-item label="品类">
                          <el-select
                            class="selectFont"
                            v-model="controlSetProd.categoryName"
                            placeholder="品类"
                            @change="onCategorySetChange"
                          >
                            <el-option
                              class="selectFont"
                              v-for="(item, index) in categorySet"
                              :key="index"
                              :label="item.categoryName"
                              :value="item.categoryName"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="型号">
                          <el-select
                            class="selectFont"
                            v-model="controlSetProd.productCode"
                            placeholder="型号"
                            @change="onProductCodeChange"
                          >
                            <el-option
                              class="selectFont"
                              v-for="(item, index) in prodCodeList"
                              :key="index"
                              :label="item"
                              :value="item"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="text" @click="onControlSelect(0)">查看产品型号</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="controlProdSel-container" v-else>
                      <el-form
                        :inline="true"
                        :model="prodSearchCode"
                        class="control-form-inline"
                        size="small"
                      >
                        <el-form-item label="终端编号">
                          <el-autocomplete
                            v-model="prodSearchCode.productCode"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="终端编号"
                            @select="handleSelectMine"
                          ></el-autocomplete>
                        </el-form-item>
                        <el-form-item>
                          <el-button size="small" type="text" @click="onControlSelect(1)">组合查询</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                  <div class="table-container">
                    <el-table
                      border
                      :data="prodControlState.controlSet"
                      highlight-current-row
                      max-height="298"
                      size="mini"
                      class="setHeight"
                      @current-change="controlRowSetDetail"
                      ref="monitorSea"
                      style="width: 100%"
                    >
                      <el-table-column prop="productCode" label="产品型号" width="120"></el-table-column>
                      <el-table-column prop="productName" label="产品名称" width="230"></el-table-column>
                      <el-table-column prop="brandName" label="所属品牌" width="95"></el-table-column>
                      <el-table-column prop="categoryName" label="所属品类" width="85"></el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            @click.native.stop="updateControlRow(scope.row)"
                            type="text"
                            size="mini"
                          >{{scope.row.monitorStatus =='1' ? '取消监控' : '设置监控'}}</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
                <div class="paginationSet">
                  <div class="pagination-container">
                    <div class="toStart" @click="handleCurMonitorChange(1)">首页</div>
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :current-page.sync="prodControlState.currentPage"
                      @current-change="handleCurMonitorChange"
                      :total="prodControlState.totalRecord"
                    ></el-pagination>
                  </div>
                </div>
              </div>
            </div>
            <div class="dialog-content-item controlInfo">
              <div class="content-item-container">
                <div class="titleHeader controlInfoHeader">渠道的监控信息</div>
                <div class="controlProdContent">
                  <div class="table-container">
                    <el-table
                      stripe
                      border
                      size="mini"
                      class="setHeight"
                      :data="mineProdControl"
                      max-height="342"
                      style="width: 100%"
                    >
                      <el-table-column prop="monitorIndex" label="监控指标" width="125"></el-table-column>
                      <el-table-column prop="monitorCycle" label="监控周期" width="125"></el-table-column>
                      <el-table-column label="监控状态" width="125">
                        <template slot-scope="scope">
                          <span
                            v-text="scope.row.monitorStatus"
                            :class="['监控中' == scope.row.monitorStatus ? 'monitorStyle' : 'nomonitorStyle']"
                          ></span>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            @click.native.prevent="updateControlRowItem(scope.row)"
                            type="text"
                            size="mini"
                          >{{ '监控中' == scope.row.monitorStatus ? '不监控' : '监控'}}</el-button>
                          <el-button
                            type="text"
                            size="mini"
                            @click.native.prevent="controlEditRow(scope.row,scope.$index)"
                          >编辑</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!--  详情Dialog  -->
      <detail-dialog :showdialog.sync="detailDialogTableVisible"></detail-dialog>
      <!--  异常分析Dialog  -->
      <outlier-analysis
        v-if="compareItemsProd.length > 0"
        :category-id="cateSetActive.categoryId"
        :showdialog.sync="analysisDialogTableVisible"
        :product-code="cateSetActive.productCode"
      ></outlier-analysis>
      <!--  监控详情设置Dialog  -->
      <div class="controlSet-dialog dialogHeaderFont">
        <el-dialog
          title="指标监控详情设置"
          width="92%"
          top="8vh"
          :visible.sync="controlSetDialogTableVisible"
        >
          <div class="controlSet-dialog-content">
            <div class="controlSet-dialog-content-item controlSet-content-start">
              <div class="controlSet-content-item">
                <div class="content-item-name">监控状态:</div>
                <div class="content-item-options">
                  <el-radio-group size="mini" v-model="controlEditRowCont.monitoringState">
                    <el-radio-button label="监控中">监控中</el-radio-button>
                    <el-radio-button label="未监控">取消监控</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="controlSet-content-item">
                <div class="content-item-name">监控指标:</div>
                <div class="content-item-options">
                  <el-button type="text" v-text="controlEditRowCont.monitoringIndex"></el-button>
                </div>
              </div>
              <div class="controlSet-content-item">
                <div class="content-item-name">监控周期:</div>
                <div class="content-item-options">
                  <el-select
                    class="selectFont"
                    size="mini"
                    v-model="controlEditRowCont.monitoringCycle"
                    placeholder="请选择"
                  >
                    <el-option
                      class="selectFont"
                      v-for="item in controlCircle"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="controlSet-dialog-content-item controlSet-content-center">
              <div class="content-center-small">监控预警值:</div>
              <div class="content-center-max">
                <div class="meanValue content-center-max-item">
                  <div class="titleHeader">
                    <div class="center-max-name flex-container">
                      <div style="margin-right: 12px;">均值:</div>
                      <div v-text="controlEditRowCont.averageValue"></div>
                    </div>
                    <div class="center-max-status">
                      <el-radio-group size="mini" v-model="controlEditRowCont.averageValueStatus">
                        <el-radio-button label="开启">开启</el-radio-button>
                        <el-radio-button label="关闭">关闭</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="center-max-content">
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">大于等于均值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'averageValueAbnormalJudge0','averageValueAbnormalHint0')"
                            v-model="controlEditRowCont.averageValueAbnormalJudge0"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.averageValueAbnormalJudge0 == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.averageValueAbnormalHint0"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">小于历史均值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'averageValueAbnormalJudge1','averageValueAbnormalHint1')"
                            v-model="controlEditRowCont.averageValueAbnormalJudge1"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.averageValueAbnormalJudge1 == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.averageValueAbnormalHint1"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="customValue content-center-max-item">
                  <div class="titleHeader">
                    <div class="center-max-name">自定义阀值</div>
                    <div class="center-max-status">
                      <el-radio-group
                        size="mini"
                        v-model="controlEditRowCont.customizedValueStatus"
                      >
                        <el-radio-button label="开启">开启</el-radio-button>
                        <el-radio-button label="关闭">关闭</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="center-max-content">
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">最大值:</div>
                        <div>
                          <el-input-number
                            style="width: 210px"
                            size="mini"
                            v-model="controlEditRowCont.maxValue"
                            :min="1"
                            :max="2147483647"
                            placeholder="请输入最大值"
                          ></el-input-number>
                        </div>
                        <div>
                          <el-select
                            class="selectFont selectSet"
                            v-model="controlEditRowCont.customizedUnit0"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlUnit"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div class="flex-container">
                        <div class="status-item-name">最小值:</div>
                        <div>
                          <el-input-number
                            style="width: 210px"
                            size="mini"
                            v-model="controlEditRowCont.minValue"
                            :min="1"
                            :max="2147483647"
                            placeholder="请输入最小值"
                          ></el-input-number>
                        </div>
                        <div>
                          <el-select
                            class="selectSet selectFont"
                            v-model="controlEditRowCont.customizedUnit1"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlUnit"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">大于最大值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'maxValuedAbnormalJudge','maxValueAbnormalHint')"
                            v-model="controlEditRowCont.maxValuedAbnormalJudge"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.maxValuedAbnormalJudge == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.maxValueAbnormalHint"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">小于最小值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'minValuedAbnormalJudge','minValueAbnormalHint')"
                            v-model="controlEditRowCont.minValuedAbnormalJudge"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.minValuedAbnormalJudge == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.minValueAbnormalHint"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="flex-container center-status-item">
                      <div class="flex-container">
                        <div class="status-item-name">大于最小值小于最大值时:</div>
                        <div>
                          <el-select
                            class="selectFont"
                            @change="selVal => controlEditRowContChangeSet(selVal,'medianValuedAbnormalJudge','medianValueAbnormalHint')"
                            v-model="controlEditRowCont.medianValuedAbnormalJudge"
                            placeholder="请选择"
                            size="mini"
                          >
                            <el-option
                              class="selectFont"
                              v-for="item in controlStatus"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                      <div
                        class="flex-container"
                        v-show="controlEditRowCont.medianValuedAbnormalJudge == '异常'"
                      >
                        <div class="status-item-name">异常提示:</div>
                        <div>
                          <el-input
                            size="mini"
                            v-model="controlEditRowCont.medianValueAbnormalHint"
                            placeholder="请输入异常提示"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="controlSet-dialog-content-item controlSet-content-end">
              <div class="controlSet-content-operate">
                <el-button
                  size="medium"
                  @click="mineControlSetSure"
                  :loading="mineControlSetSureStatus"
                >确 定</el-button>
                <el-button size="medium" @click="mineControlSetCancel">取 消</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!--  推送Dialog  -->
      <push-dialog :showdialog.sync="pushDialogTableVisible"></push-dialog>
    </div>
  </div>
</template>

<script>
import { controlCircle, controlStatus, controlUnit } from "api/config";
import * as opreate from "api/getData";
import DetailDialog from "./detailDialog";
import PushDialog from "./pushDialog";
import OutlierAnalysis from "./outlierAnalysis";
import { mapGetters, mapMutations } from "vuex";
const mineNowSet = new Date();

export default {
  name: "single-product",
  computed: {
    ...mapGetters(["compareItemsProd"])
  },
  data() {
    return {
      controlCircle: controlCircle,
      controlStatus: controlStatus,
      controlUnit: controlUnit,
      yearSetCurrent: mineNowSet.getFullYear(),
      monthSetCurrent: mineNowSet.getMonth(),
      pickerOptions: {
        disabledDate: true
      },
      baseInfoProd: {},
      analysisSetInit: {
        monitoringIndex: "全部",
        monitorCircle: "全部",
        monitorTime: "",
        controlValueTime: ""
      },
      controlSetInit: {
        controlBrand: "产品型号",
        controlProdCode: ""
      },
      controlSetProd: {
        categoryName: "",
        productCode: ""
      },
      prodSearchCode: {
        productCode: ""
      },
      restProdCodeAll: [],
      prodControlState: {
        controlSet: [],
        totalRecord: 1,
        currentPage: 1
      },
      monitorSet: {
        prodCtrolSet: [],
        currentPage: 1,
        totalRecord: 1
      },
      showStartCtrl: true,
      categorySet: [],
      prodCodeList: [],
      selectedYear: "",
      searchGroupSet: [],
      searchBrandSet: [],
      searchCodeSet: [],
      cateSetActive: [],
      summaryYearRange: "",
      mineProdControl: [],
      controlEditRowCont: {},
      mineControlSetSureStatus: false,
      controlDialogTableVisible: false,
      detailDialogTableVisible: false,
      pushDialogTableVisible: false,
      analysisDialogTableVisible: false,
      controlSetDialogTableVisible: false,
      controlSelect: true,
      analysisSelect: true
    };
  },
  filters: {
    statusFilter(status) {
      let fontColor = "#333";
      if (status.indexOf("-") == -1) {
        fontColor = "red";
      }
      return fontColor;
    }
  },

  components: {
    DetailDialog,
    PushDialog,
    OutlierAnalysis
  },
  created() {
    this.initStateSelectParams();
  },
  mounted() {
    this.getBaseInfoProd();
    this.initStateProd(this.analysisSetInit);
  },
  methods: {
    ...mapMutations(["updateProdCtrolStateInfo", "updateCompareItemsProd"]),
    limitSet: function(time) {
      return (
        time.getTime() <
          new Date(this.yearSetCurrent, this.monthSetCurrent, 1).getTime() ||
        time.getTime() >
          new Date(this.yearSetCurrent, this.monthSetCurrent + 1, 0).getTime()
      );
    },
    keypressChange(nameSet) {
      let tempSet = this.controlEditRowCont[nameSet];
      if (isNaN(Number(tempSet))) {
        this.controlEditRowCont[nameSet] = tempSet.replace(/\D/g, "");
      }
    },
    getBaseInfoProd() {
      opreate.productNumber().then(res => {
        this.baseInfoProd = res.data || {};
      });
    },
    setProdMonitor(dataSet = { list: [], totalRecord: 0, currentPage: 0 }) {
      let { currentPage = 0, totalRecord = 0, list = [] } = dataSet || {};
      list = list.map(v => {
        let unitSet = {
          销售额: "元",
          销售量: "件",
          销售均价: "元",
          销售量增率: "%",
          销售额增率: "%",
          市占率: "%"
        }[v.monitoringIndex];
        let tempSet =
          "销售量" == v.monitoringIndex
            ? {
                monitor: `${parseFloat(v.monitor).toFixed(0)}${unitSet}`,
                indexValue: `${v.indexValue}${unitSet}`,
                dValue: `${parseFloat(v.dValue).toFixed(0)}${unitSet}`
              }
            : {
                monitor: `${v.monitor}${unitSet}`,
                indexValue: `${v.indexValue}${unitSet}`,
                dValue: `${v.dValue}${unitSet}`
              };
        return Object.assign(v, tempSet);
      });
      this.monitorSet = { totalRecord, currentPage, prodCtrolSet: list || [] };
    },
    initStateSelectParams() {
      opreate.getCategoryNameList().then(res => {
        let categorySet = (this.categorySet = res.data || []);
        let { categoryName } = categorySet[0] || {};
        this.obtainProductCodeStatus(categoryName, true);
      });
    },
    obtainProductCodeStatus(categoryName = "", flag = false) {
      opreate.getProductCodeList({ categoryName }).then(res => {
        if ("200" == res.code) {
          const fn = res.data || [];
          this.prodCodeList = fn;
          this.controlSetProd = { categoryName, productCode: fn[0] || "" };
          this.getProdMoniInfoStatus(this.controlSetProd);
          const restProdCodeAll = fn.map(v => {
            return { value: v, name: v };
          });
          this.restProdCodeAll =
            restProdCodeAll.length > 0 ? restProdCodeAll.slice(1) : [];
        }
      });
    },
    getProdMoniInfoStatus(controlSetProd, rowSet) {
      if (rowSet) {
        let { productName, productCode } = rowSet;
        opreate.getMonitorByProdCode({ productCode, productName }).then(res => {
          this.mineProdControl = res.data;
        });
      } else {
        opreate
          .getProductMonitorInfo(controlSetProd)
          .then(res => {
            let { list, totalRecord, currentPage } = res.data || {};
            this.prodControlState = {
              totalRecord: totalRecord || 0,
              currentPage: currentPage || 0,
              controlSet: list || []
            };
            let rowStart = list ? list[0] : null;
            if (rowStart) {
              this.$refs.monitorSea &&
                this.$refs.monitorSea.setCurrentRow(rowStart || null);
              opreate.getMonitorByProdCode(rowStart).then(res => {
                this.mineProdControl = res.data || [];
              });
            } else {
              this.mineProdControl = [];
            }
          })
          .catch(err => {
            console.error(err);
          });
      }
    },
    initStateProd(params = {}) {
      let {
        monitorTime,
        monitoringIndex,
        controlValueTime,
        pageNumber
      } = params;
      let tempSet = { monitorTime, monitoringIndex, pageNumber };
      tempSet = controlValueTime
        ? Object.assign(tempSet, {
            monitorBeginTime: controlValueTime[0],
            monitorEndTime: controlValueTime[1]
          })
        : tempSet;
      opreate.singleProdWarnPost(tempSet).then(res => {
        this.setProdMonitor(res.data);
      });
    },
    onControlDurationChange(newVal) {
      Object.assign(this.analysisSetInit, {
        monitorTime: "",
        controlValueTime: ""
      });
      "all" == newVal ? (this.pickerOptions.disabledDate = true) : "";
    },
    controlMonthTimeChange(newVal) {
      if (newVal) {
        let setParam = newVal.split("-");
        this.yearSetCurrent = parseInt(setParam[0]);
        this.monthSetCurrent = parseInt(setParam[1]) - 1;
        this.pickerOptions.disabledDate = this.limitSet;
      } else {
        this.pickerOptions.disabledDate = true;
      }
    },
    onCategorySetChange(cateSet) {
      opreate
        .getProductCodeList({
          categoryName: cateSet == "全部品类" ? "" : cateSet
        })
        .then(res => {
          const temSet = res.data || [];
          this.prodCodeList = temSet;
          this.controlSetProd.productCode = temSet[0] || "";
          this.getProdMoniInfoStatus(this.controlSetProd);
        });
    },
    onProductCodeChange(val) {
      this.getProdMoniInfoStatus(this.controlSetProd);
    },
    onSubmitSelectInit(flag) {
      this.analysisSelect = Boolean(flag);
    },
    onControlSelect(flag) {
      let tempSet = Boolean(flag) ? this.controlSetProd : this.prodSearchCode;
      this.getProdMoniInfoStatus(tempSet);
      this.controlSelect = Boolean(flag);
    },
    onSubmitProdCodeOrName(controlSetInit) {
      let { controlBrand, controlProdCode, pageNumber } = controlSetInit;
      let mineSet = { pageNumber, productCode: "", productName: "" };
      mineSet =
        controlBrand == "产品型号"
          ? Object.assign(mineSet, { productCode: controlProdCode })
          : Object.assign(mineSet, { productName: controlProdCode });
      opreate.singleProdWarnCodeOrName(mineSet).then(res => {
        this.setProdMonitor(res.data);
      });
    },
    handleCurChange(pageNumber = "") {
      if (Boolean(this.analysisSelect)) {
        this.initStateProd({ pageNumber, ...this.analysisSetInit });
      } else {
        this.onSubmitProdCodeOrName({ pageNumber, ...this.controlSetInit });
      }
    },
    handleCurMonitorChange(pageNumber) {
      let tempSet = Boolean(this.controlSelect)
        ? this.controlSetProd
        : this.prodSearchCode;
      this.getProdMoniInfoStatus({ pageNumber, ...tempSet });
    },
    detailRowSet(row) {
      this.updateProdCtrolStateInfo(row);
      this.detailDialogTableVisible = true;
    },
    controlDialogSet() {
      this.controlDialogTableVisible = true;
      let { controlSet } = this.prodControlState;
      this.$nextTick(() => {
        if (this.showStartCtrl) {
          this.$refs.monitorSea &&
            this.$refs.monitorSea.setCurrentRow(controlSet[0] || null);
          this.showStartCtrl = false;
        }
      });
    },
    updateControlRow(rowSet) {
      opreate.updateProductIndexStatus(rowSet).then(res => {
        if (200 == res.code) {
          rowSet.monitorStatus = res.data.monitorStatus == 1 ? 1 : 0;
        } else {
          this.$message.error("错了哦，程序出错");
        }
      });
    },
    pushRowSet(rowSet) {
      this.updateProdCtrolStateInfo(rowSet);
      this.pushDialogTableVisible = true;
    },
    async analysisRowSet(rowSet) {
      const { productCode, categoryId } = rowSet;
      opreate
        .getStartAnalysis({
          timeNumber: "6",
          productCodeList: [productCode]
        })
        .then(res => {
          if (200 == res.code && res.data) {
            this.cateSetActive = { productCode, categoryId };
            this.updateCompareItemsProd({ payload: res.data, flag: true });
            this.analysisDialogTableVisible = true;
          } else {
            this.$message.error("错了哦，请稍后再试");
          }
        });
    },
    querySearchAsync(queryString, cb) {
      let restaurants = this.restProdCodeAll;
      let results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    handleSelectMine(itemSet) {
      this.getProdMoniInfoStatus({ productCode: itemSet.value });
    },
    controlEditRow(rowSet, $index) {
      const { monitorStatus, monitorIndex, productCode, productName } = rowSet;
      opreate
        .getaverageValueByProductCode({
          productCode,
          productName,
          monitoringIndex: monitorIndex,
          monitoringState: monitorStatus
        })
        .then(res => {
          if (200 == res.code) {
            this.controlEditRowCont = Object.assign(res.data, {
              indexSet: $index
            }) || { indexSet: $index };
            this.controlSetDialogTableVisible = true;
          } else {
            this.$message.error("查询失败，请稍后再试");
          }
        });
    },
    controlRowSetDetail(rowSet) {
      this.getProdMoniInfoStatus(null, rowSet);
      this.$refs.monitorSea.setCurrentRow(rowSet);
    },
    mineControlSetCancel() {
      this.controlSetDialogTableVisible = false;
    },
    mineControlSetSure() {
      const controlEditSet = this.controlEditRowCont;
      if (
        controlEditSet.averageValueAbnormalJudge0 == "异常" &&
        !controlEditSet.averageValueAbnormalHint0
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => null
        });
        return;
      } else if (
        controlEditSet.averageValueAbnormalJudge1 == "异常" &&
        !controlEditSet.averageValueAbnormalHint1
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => null
        });
        return;
      } else if (
        controlEditSet.maxValuedAbnormalJudge == "异常" &&
        !controlEditSet.maxValueAbnormalHint
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => null
        });
        return;
      } else if (
        controlEditSet.minValuedAbnormalJudge == "异常" &&
        !controlEditSet.minValueAbnormalHint
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => null
        });
        return;
      } else if (
        controlEditSet.medianValuedAbnormalJudge == "异常" &&
        !controlEditSet.medianValueAbnormalHint
      ) {
        this.$alert("请输入异常提示", "异常提示", {
          confirmButtonText: "确定",
          callback: action => null
        });
        return;
      } else {
        opreate.saveProductMonitorInfo(controlEditSet).then(res => {
          if (200 == res.code) {
            let { indexSet } = controlEditSet;
            this.mineProdControl[indexSet]
              ? (this.mineProdControl[indexSet].monitorStatus =
                  controlEditSet.monitoringState)
              : "";
            this.$message.success("设置成功");
          } else {
            this.$message.error("设置失败，请稍后再试");
          }
          this.controlSetDialogTableVisible = false;
        });
      }
    },
    controlEditRowContChangeSet(val, name, nameVal) {
      "正常" == this.controlEditRowCont[name]
        ? (this.controlEditRowCont[nameVal] = "")
        : "";
    },
    updateControlRowItem(rowSet) {
      const { monitorIndex, productCode, monitorStatus } = rowSet;
      let tempSet = {
        monitorIndex,
        productCode,
        monitorOperation: "监控中" == monitorStatus ? "不监控" : "监控"
      };
      opreate.updateMonitorIndexState(tempSet).then(res => {
        if (200 == res.code) {
          let { indexMonitorStatus, statusDescription, monitorOperation } =
            res.data || {};
          if (indexMonitorStatus) {
            Object.assign(rowSet, {
              monitorOperation,
              monitorStatus: statusDescription
            });
          } else {
            this.$alert("请先前往编辑页面进行编辑", "异常提示", {
              confirmButtonText: "确定",
              callback: action => null
            });
          }
        } else {
          this.$mesasge.error("设置失败，请稍后再试");
        }
      });
    }
  },
  // filters:{
  //    formatColer(status) { // 颜色显示转换
  //     const statusMap = { color: 'blue', color: 'red' }
  //      return statusMap[status]
  //   },
  // },
  watch: {
    analysisSetInit: {
      deep: true,
      handler(newVal) {
        this.initStateProd(newVal);
      }
    },
    analysisSelect(newVal) {
      if (Boolean(newVal)) {
        this.initStateProd(this.analysisSetInit);
      } else {
        this.onSubmitProdCodeOrName(this.controlSetInit);
      }
    }
  }
};
</script>

<style scoped>
.whiteContainer {
  margin: 0 12px;
  padding: 0 12px;
}
.titleHeader {
  font-weight: bold;
}
.contentHeader {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.sourceContainer {
  border: 1px solid #e3e2e2;
}
.watchSet {
  width: 80px;
  background: #1bb4e4;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.sourceHeader {
  background: #e0e8ef !important;
  margin-bottom: 12px;
  padding: 0 10px;
}
.single-form-inline {
  display: flex;
  justify-content: space-between;
  background: #e0e8ef !important;
  align-items: center;
  height: 40px;
}
.el-dialog__title {
  font-weight: bold;
}
.single-form-inline .el-select {
  width: 130px;
}
.single-form-inline .el-date-editor {
  width: 240px;
}
.single-form-inline .el-date-editor--month {
  width: 130px;
}
.single-form-inline .el-form-item-set {
  margin: 0 0 2px 0;
}
.input-with-select .el-select {
  width: 120px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/**
  * @desc: This is Note
  * 监控设置Dialog
  * @author: WJ
  * @date: 2018/09/26 10:50:07
  **/
.control-dialog-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dialog-content-item {
  width: 49.5%;
  border: 1px solid #e0e8ef;
}
.controlProdContent {
  padding: 10px;
  background: white;
}
.control-form-inline {
  display: flex;
  justify-content: space-between;
}
.control-dialog-content .el-form-item {
  margin-bottom: 8px;
}
.controlProdSel .el-select {
  width: 120px;
}

/**
  * @desc: This is Note
  * 监控详情设置Dialog
  * @author: WJ
  * @date: 2018/09/26 18:01:29
  **/
.controlSet-dialog-content {
  display: flex;
  flex-direction: column;
  background: white;
}
.controlSet-content-item {
  display: flex;
  height: 40px;
  align-items: center;
}
.controlSet-content-start {
  border-bottom: 1px solid #e0e8ef;
}
.controlSet-content-center {
  display: flex;
  padding: 12px;
}
.controlSet-content-center .titleHeader {
  justify-content: space-between;
}
.content-item-name {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.content-item-options {
  display: flex;
  align-items: center;
  height: 40px;
}
.content-item-options label {
  margin: 0 !important;
}
.content-center-small {
  padding: 0 10px 0 0;
}
.content-center-max {
  flex: 1;
}
.content-center-max-item {
  border: 1px solid #e0e8ef;
  border-radius: 4px;
}
.customValue {
  margin: 12px 0;
}
.center-max-content {
  padding: 10px 0;
}
.center-status-item {
  height: 40px;
}
.status-item-name {
  padding: 0 12px;
}
.selectSet {
  width: 94px !important;
  margin-left: 12px;
}
.controlSet-content-end {
  display: flex;
  justify-content: center;
  padding-bottom: 12px;
}
.controlSet-content-operate {
  width: 240px;
  display: flex;
  justify-content: space-between;
}

/**
  * @desc: This is Note
  * 异常分析Dialog
  * @author: WJ
  * @date: 2018/09/26 21:01:27
  **/
.analysis-dialog-content {
  background: white;
  border: 1px solid #e0e8ef;
  border-radius: 4px;
}
.setHeader,
.el-select-container,
el-select-label {
  display: flex;
  align-items: center;
}
.el-select-label {
  margin: 0 10px 0 15px;
}
.analysisHeader {
  justify-content: flex-end;
}
.contrastive {
  display: flex;
  padding: 12px;
  overflow-x: scroll;
}
.contrastive-container {
  display: flex;
  border: 1px solid #e0e8ef;
}
.contrastive-title {
  width: 132px;
  display: flex;
  flex-direction: column;
}
.compare-option,
.compare-prod {
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 10px;
}
.compare-option {
  border: 1px solid #e0e8ef;
}
.compare-prod {
  border: 1px solid #e0e8ef;
}
.contrastive-body {
  display: flex;
}
.contrastive-set {
  width: 140px;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  border: 1px solid #e0e8ef;
}
.optionProd {
  height: 132px;
  padding: 0px;
  flex-direction: column;
}
.compareProd {
  height: 66px;
  justify-content: flex-end;
  display: flex;
  padding: 10px;
  width: 100%;
}
.compareOption {
  height: 66px;
  align-items: flex-end;
  display: flex;
  padding: 10px;
  width: 100%;
}
.prod-item {
  width: 142px;
  display: flex;
  flex-direction: column;
}
.compare-prod-title {
  height: 132px;
  padding: 10px;
  position: relative;
}
.imgSet {
  height: 100px;
  width: 100px;
  background: #e0e8ef;
}
.delSet {
  position: absolute;
  right: 8px;
  top: 10px;
  cursor: pointer;
}
.plus-item {
  height: 35px;
  display: flex;
  align-items: center;
  color: #409eff;
  font-size: 15px;
  cursor: pointer;
}
.plus-item span {
  padding: 0 5px;
}
.plus-item .el-icon-plus {
  font-weight: 800;
  font-size: 15px;
}
.contrastive-title .borderSet {
  border-right: none;
}
.contrastive-body .borderSet {
  border-right: none;
  border-left: none;
}
.prod-item:last-child .borderSet {
  border-right: 1px solid #e0e8ef;
}
/**
* @desc: This is Note
* 监控状态动态样式
* @author: qinlin
* @date: 2019/04/7 18:01:29
**/
.monitorStyle {
  background-color: #2fc973;
  padding: 20px 16px;
  color: #fff;
  border-radius: 8px;
}
.nomonitorStyle {
  background-color: #a4b5c2;
  padding: 20px 16px;
  color: #fff;
  border-radius: 8px;
}
</style>
